<template>
  <div class="app-container home">
    <el-row :gutter="20" class="main-content">
      <el-col :span="24">
        <div class="welcome-section">
          <div class="welcome-content">
            <h1>欢迎使用人事管理系统</h1>
            <p class="welcome-description">这是一个现代化的企业人事管理平台，帮助您高效管理员工信息、组织架构和工作流程。</p>

          </div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="main-content" style="margin-top: 25px;">
      <el-col :xs="24" :sm="24" :md="12">
        <div class="clock-section">
          <div class="section-header">
            <h3>当前时间</h3>
          </div>
          <div class="clock-container">
            <div class="time-info">
              <div class="time">{{ currentTime }}</div>
              <div class="date">{{ currentDate }} {{ currentWeekday }}</div>
            </div>
            <div class="digital-clock">
              <div class="digit-colon">
                <div class="digit">{{ hoursTens }}</div>
                <div class="digit">{{ hoursUnits }}</div>
                <div class="colon">:</div>
                <div class="digit">{{ minutesTens }}</div>
                <div class="digit">{{ minutesUnits }}</div>
                <div class="colon">:</div>
                <div class="digit">{{ secondsTens }}</div>
                <div class="digit">{{ secondsUnits }}</div>
              </div>
            </div>
          </div>
        </div>
      </el-col>

      <el-col :xs="24" :sm="24" :md="12">
        <div class="notice-section">
          <div class="section-header">
            <h3>系统公告</h3>
          </div>
          <div class="notice-content">
            <ul>
              <li v-for="(activity, index) in activities" :key="index" class="notice-item">
                <div class="notice-title">{{ activity.content }}</div>
                <div class="notice-date">{{ activity.timestamp }}</div>
              </li>
            </ul>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Index">
import { useRouter } from 'vue-router'

const router = useRouter()
const version = ref('3.9.0')

const activities = ref([
  { content: '系统升级完成，新增员工考勤功能', timestamp: '2025-09-01' },
  { content: '员工信息录入功能优化', timestamp: '2025-08-28' },
  { content: '修复了员工查询的性能问题', timestamp: '2025-08-25' },
  { content: '新增员工培训模块', timestamp: '2025-08-20' }
])

// 获取当前时间相关数据
const now = new Date()
const currentTime = ref(formatTime(now))
const currentDate = ref(formatDate(now))
const currentWeekday = ref(getWeekday(now))

// 数字时钟相关数据
const hoursTens = ref('0')
const hoursUnits = ref('0')
const minutesTens = ref('0')
const minutesUnits = ref('0')
const secondsTens = ref('0')
const secondsUnits = ref('0')

// 更新时间
function updateTime() {
  const now = new Date()
  currentTime.value = formatTime(now)
  currentDate.value = formatDate(now)
  currentWeekday.value = getWeekday(now)

  const hours = now.getHours()
  const minutes = now.getMinutes()
  const seconds = now.getSeconds()

  hoursTens.value = Math.floor(hours / 10).toString()
  hoursUnits.value = (hours % 10).toString()
  minutesTens.value = Math.floor(minutes / 10).toString()
  minutesUnits.value = (minutes % 10).toString()
  secondsTens.value = Math.floor(seconds / 10).toString()
  secondsUnits.value = (seconds % 10).toString()
}

// 格式化时间 HH:MM
function formatTime(date) {
  const hours = date.getHours().toString().padStart(2, '0')
  const minutes = date.getMinutes().toString().padStart(2, '0')
  return `${hours}:${minutes}`
}

// 格式化日期 YYYY年MM月DD日
function formatDate(date) {
  return `${date.getFullYear()}年${(date.getMonth() + 1).toString().padStart(2, '0')}月${date.getDate().toString().padStart(2, '0')}日`
}

// 获取星期几
function getWeekday(date) {
  const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
  return weekdays[date.getDay()]
}

function goTarget(url) {
  window.open(url, '__blank')
}

function goToEmployeeList() {
  router.push('/employee/employee')
}

function addEmployee() {
  router.push('/employee/employee')
}

function addDepartment() {
  router.push('/system/dept')
}

function viewReports() {
  router.push('/report')
}

function systemSettings() {
  router.push('/system/config')
}

// 启动定时器更新时间
onMounted(() => {
  updateTime()
  setInterval(updateTime, 1000)
})
</script>

<style scoped lang="scss">
.home {
  padding: 20px;
  background-color: #f5f7f9;
  min-height: calc(100vh - 84px);

  .welcome-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 12px;
    padding: 30px 40px;
    text-align: center;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    min-height: 33vh;
    display: flex;
    align-items: center;

    .welcome-content {
      width: 100%;

      h1 {
        font-size: 32px;
        margin-bottom: 20px;
        font-weight: 500;
        letter-spacing: 1px;
      }

      .welcome-description {
        font-size: 18px;
        margin-bottom: 30px;
        opacity: 0.95;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
        line-height: 1.6;
      }

      .welcome-actions {
        .el-button {
          font-size: 16px;
          padding: 14px 32px;
          border: none;
          border-radius: 30px;
          margin: 0 10px;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
          transition: all 0.3s ease;

          i {
            margin-right: 8px;
          }

          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
          }

          &:first-child {
            background: rgba(255, 255, 255, 0.2);

            &:hover {
              background: rgba(255, 255, 255, 0.3);
            }
          }
        }
      }
    }
  }

  .section-header {
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    background: white;
    border-radius: 10px 10px 0 0;

    h3 {
      margin: 0;
      font-size: 18px;
      font-weight: bold;
      color: #303133;
      display: flex;
      align-items: center;

      &::before {
        content: "";
        display: inline-block;
        width: 4px;
        height: 16px;
        background: #409eff;
        border-radius: 2px;
        margin-right: 10px;
      }
    }
  }

  .clock-section {
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    height: 100%;
    min-height: 300px;

    .clock-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: calc(100% - 56px);
      padding: 20px;

      .time-info {
        text-align: center;
        margin-bottom: 20px;

        .time {
          font-size: 36px;
          font-weight: bold;
          margin-bottom: 5px;
          color: #303133;
        }

        .date {
          font-size: 18px;
          color: #909399;
        }
      }

      .digital-clock {
        .digit-colon {
          display: flex;
          align-items: center;

          .digit {
            width: 30px;
            height: 40px;
            background: #f5f7f9;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            font-weight: bold;
            margin: 0 2px;
            color: #303133;
          }

          .colon {
            font-size: 24px;
            font-weight: bold;
            margin: 0 5px;
            color: #909399;
          }
        }
      }
    }
  }

  .notice-section {
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    height: 100%;
    min-height: 300px;

    .notice-content {
      padding: 15px 20px;
      height: calc(100% - 56px);

      .notice-item {
        padding: 12px 0;
        border-bottom: 1px solid #f5f5f5;

        &:last-child {
          border-bottom: none;
        }

        .notice-title {
          font-size: 14px;
          color: #303133;
          margin-bottom: 5px;
          line-height: 1.4;
        }

        .notice-date {
          font-size: 12px;
          color: #909399;
        }
      }
    }
  }

  @media (max-width: 992px) {
    .welcome-section {
      padding: 25px 20px;
      min-height: 25vh;

      .welcome-content {
        h1 {
          font-size: 28px;
        }

        .welcome-description {
          font-size: 16px;
        }

        .welcome-actions {
          .el-button {
            padding: 12px 24px;
            font-size: 14px;
            margin: 5px;
          }
        }
      }
    }
  }

  @media (max-width: 768px) {
    padding: 15px;

    .welcome-section {
      padding: 20px 15px;
      min-height: 20vh;

      .welcome-content {
        h1 {
          font-size: 24px;
          margin-bottom: 15px;
        }

        .welcome-description {
          font-size: 14px;
          margin-bottom: 20px;
        }
      }
    }

    .clock-section,
    .notice-section {
      min-height: 250px;
    }

    .clock-section {
      .clock-container {
        .time-info {
          .time {
            font-size: 28px;
          }

          .date {
            font-size: 16px;
          }
        }

        .digital-clock {
          .digit-colon {
            .digit {
              width: 25px;
              height: 35px;
              font-size: 20px;
            }

            .colon {
              font-size: 20px;
            }
          }
        }
      }
    }
  }
}
</style>

